import { Component, OnInit } from '@angular/core';
import { CommunicateService } from 'src/app/communicate.service';
import { ArticleService } from 'src/app/service/service/article.service';

interface articleModel {
  articles:string;
  id:number;
  title:string;
  artist:string;
  date:string;
  viewed:number;
  liked:number;
}
@Component({
  selector: 'app-article-class',
  templateUrl: './article-class.component.html',
  styleUrls: ['./article-class.component.less']
})
export class ArticleClassComponent implements OnInit {

  public page:number=0;
  public pageIndex:number=1;
  public articleList:Array<articleModel>=[]
  public imgSrc:string=""
  public classTag:string=""

  constructor(
    private cs: CommunicateService,
    private article:ArticleService
  ) { }

  ngOnInit(): void {
      this.classTag=this.cs.c
      this.setOrinActive()    
      this.setPage(this.cs.c)
      this.getArticle(this.cs.c)
  }

  setClassTag(n:string){
    this.classTag=n
    this.pageIndex=1
    this.getArticle(n)
  }
  
  setActive(e:any){
    const tab = document.querySelectorAll(".tabList")
    tab.forEach((r)=>r.classList.remove("active"))
    e.target.classList.add("active");
  }
  setOrinActive(){
    const tab = document.querySelectorAll(".tabList")
    switch (this.cs.c) {
      case "life":
        tab[0].classList.add("active")
        break;
      case "mark":
        tab[1].classList.add("active")
        break;
      case "front":
        tab[2].classList.add("active")
        break;
      case "back":
        tab[3].classList.add("active")
        break;
    }
  }
  setPage(c:string){
    this.article.getLastIdByClass(c)
    .then((data:any)=>{this.page = data})
    .catch((err:any)=>{console.log(err);})
  }

  getArticle(n:string){
    const p = this.pageIndex;
    this.article.getArticleByClass(n,p).toPromise()
    .then((data:any)=>{
      this.articleList=data;
      this.imgSrc=`assets/images/${n}.png`
    })
    .catch((err:any)=>{console.log(err);})
  }

  showPg(){
   this.getArticle(this.classTag)
  }
}
